<!--
 * @Author: your name
 * @Date: 2021-10-08 10:21:05
 * @LastEditTime: 2021-10-08 20:20:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dashboard\src\pages\government\components\Right2.vue
-->
<template>
  <div id="right2" style="height: 95%"></div>
</template>
<script>
import { Column } from "@antv/g2plot";

export default {
  data() {
    return {};
  },
  methods: {
    myChart() {
      const data = [
        {
          sex: "male",
          age: "11-20",
          amount: 120,
        },
        {
          sex: "male",
          age: "21-30",
          amount: 150,
        },
        {
          sex: "male",
          age: "31-40",
          amount: 100,
        },
        {
          sex: "male",
          age: "41-50",
          amount: 80,
        },
        {
          sex: "male",
          age: "51-60",
          amount: 110,
        },
        {
          sex: "female",
          age: "11-20",
          amount: 80,
        },
        {
          sex: "female",
          age: "21-30",
          amount: 100,
        },
        {
          sex: "female",
          age: "31-40",
          amount: 110,
        },
        {
          sex: "female",
          age: "41-50",
          amount: 85,
        },
        {
          sex: "female",
          age: "51-60",
          amount: 75,
        },
      ];

      const stackedColumnPlot = new Column("right2", {
        data,
        isGroup: true,
        xField: "age",
        yField: "amount",
        seriesField: "sex",
        /** 设置颜色 */
        color: ["#44bd88", "#f88c24"],
        /** 设置间距 */
        // marginRatio: 0.1,
        label: {
          // 可手动配置 label 数据标签位置
          position: "middle", // 'top', 'middle', 'bottom'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: "interval-adjust-position" },
            // 数据标签防遮挡
            { type: "interval-hide-overlap" },
            // 数据标签文颜色自动调整
            { type: "adjust-color" },
          ],
        },
      });

      stackedColumnPlot.render();
    },
  },
  created() {},
  mounted() {
    this.myChart();
  },
};
</script>
